/**
 * @description 秒杀商品Item
 */
import React from 'react';
import classnames from "classnames";
import "./styles/App.less";
import { Button, Toast } from 'wd-mobile';
import util from "commons/util";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div className={classnames("xseckill-goodsItem")} onClick={() => {
        util.checkWechatEnv((res) => {
          if (res == 'miniprogram') {
            wx.miniProgram.navigateTo({
              url: `/pages/goodsDetail/goodsDetail?id=${this.props.data.id}`
            })
          } else {
            location.href = `./goods.html#/Detail/${this.props.data.id}`;
          }
        })
      }}>
        <div className={"xseckill-goodsItem-img"}>
          <div className={classnames("xseckill-goodsItem-img-container", "wdskeleton-translate")} style={{ backgroundImage: `url(${this.props.data.goodsIcon})` }}></div>
          {
            this.props.data.stockNum <= 0 && <div className={"xseckill-goodsItem-soldOut"}><div>售罄</div></div>
          }
          {
            !!this.props.isHot && this.props.data.isNoob != 1 && <div className={"xseckill-goodsItem-hot"}>热销</div>
          }
          {
            this.props.data.isNoob == 1 && <div className={"xseckill-goodsItem-newer"}>首单特价</div>
          }
        </div>
        <div className={"xseckill-goodsItem-info"}>
          <div className={"xseckill-goodsItem-info-name"}><span className={this.props.data.stockNum <= 0 ? 'xseckill-goodsItem-info-name-soldOut' : ''}>{this.props.data.skuName}</span></div>
          <div className={"xseckill-goodsItem-info-bottom"}>
            <div className={"xseckill-goodsItem-info-price"}>
              ￥{this.props.data.price}<span className={"xseckill-goodsItem-info-price-recommendPrice"}>{this.props.data.recommendPrice ? `￥${this.props.data.recommendPrice}` : ""}</span>
            </div>
            <div className={"xseckill-goodsItem-soldInfo"}>
              {
                this.props.data.stockNum < 10 && this.props.data.stockNum > 0 && <span className={"xseckill-goodsItem-soldInfo-stock"}>仅剩{this.props.data.stockNum}件</span>
              }
              <span className={"xseckill-goodsItem-soldInfo-soldNum"}>已售{this.props.data.soldNum || 0}件</span>
            </div>
          </div>
          <Button className={classnames("xseckill-goodsItem-buy", {
            "xseckill-goodsItem-orderState": this.props.data.stockNum <= 0
          })} onClick={(e) => {
            e.stopPropagation();
            if (this.props.data.stockNum > 0) {
              util.checkWechatEnv((res) => {
                if (res == 'miniprogram') {
                  wx.miniProgram.navigateTo({
                    url: `/pages/goodsDetail/goodsDetail?id=${this.props.data.id}`
                  })
                } else {
                  location.href = `./goods.html#/Detail/${this.props.data.id}`;
                }
              })
              return;
            }
            // 预约操作
            if (this.props.data.stockNum <= 0 && !this.props.data.isSeckill) {
              if (!!this.props.data.isBook) {
                // 取消预约
                Toast.info("已取消预约", 1500);
                this.props.unBookGoods && this.props.unBookGoods();
              } else {
                // 预约
                if (!localStorage.getItem("hasBookGoods")) {
                  localStorage.setItem("hasBookGoods", "1");
                  Toast.info("商品到货后将通过微信通知您，请确认已经关注公众号”出卡啦权益“", 2000);
                } else {
                  Toast.info("预约成功", 1500);
                }
                this.props.bookGoods && this.props.bookGoods();
              }
            }
          }}>{this.props.data.stockNum > 0 ? "购买" :
            (!!this.props.data.isSeckill ? "售罄" :
              (!!this.props.data.isBook ? "已预约" : "预约"))}</Button>
        </div>
      </div>
    );
  }
}

App.defaultProps = {
  // 展示库存
  showStock: true,
};

export default App;
